<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<form class="layui-form">
    <div class="layui-inline">
        <label class="layui-form-label">查询条件</label>
        <div class="layui-input-block">
            <input type="text" id="name" style="width: 400px;"  placeholder="请输入条件" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <select name="type" id="type" lay-filter="type" lay-search="">
            <option value="">商品类型</option>
        </select>
    </div>

    <div class="layui-inline">
        <input type="button" id="selectBtn" class="layui-btn" data-type="reload" value="查询">
    </div>
    <div class="layui-inline">
        <input type="button" id="addBtn" class="layui-btn" data-type="reload" value="添加">
    </div>
</form>

<!-- 第一：在页面中结构化表格 -->
<table class="layui-table" id="test" lay-filter="test" style="width: 98%;">
</table>

<script type="text/html" id="status-switch">
    <input type="checkbox" name="status" value="{{= d.productId }}" title="上架|" lay-skin="switch"
    lay-filter="demo-templet-status" {{=d.productStatus == "1" ? "checked" : "" }}>
</script>

<!--表格操作按钮-->
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit" id="updateBtn">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">
            更多
            <i class="layui-icon layui-icon-down"></i>
        </a>
    </div>
</script>

<!-- 添加表单 -->
<div id="addContainer" style="display: none">
    <form class="layui-form" id="addForm" lay-filter="example" style="margin: 1rem">

        <div class="layui-form-item">
            <label class="layui-form-label">商品编号</label>
            <div class="layui-input-block">
                <input type="text" id="add-productId" name="productId"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" id="add-productName" name="productName"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品类型</label>
            <div class="layui-input-block">
                <select name="productType" id="add-type" lay-filter="type" lay-search="">
                    <option value="">请选择类型</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-block">
                <input type="text" id="add-productPrice" name="productPrice"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" id="add-productStatus1" name="productStatus"
                       value="1" title="上架" checked>
                <input type="radio" id="add-productStatus2" name="productStatus"
                       value="0" title="下架">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
          <textarea id="add-productDesc" name="productDesc"
                    placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>

<!-- 编辑表单 -->
<div id="updateContainer" style="display: none">
    <form class="layui-form" id="updateForm" lay-filter="example" style="margin: 1rem">

        <div class="layui-form-item">
            <label class="layui-form-label">商品编号</label>
            <div class="layui-input-block">
                <input type="text" id="update-productId" name="productId"
                       autocomplete="off" class="layui-input" readonly/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" id="update-productName" name="productName"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品类型</label>
            <div class="layui-input-block">
                <select name="productType" id="update-type" lay-filter="type" lay-search="">
                    <option value="">请选择类型</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-block">
                <input type="text" id="update-productPrice" name="productPrice"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" id="update-productStatus1" name="productStatus"
                       value="1" title="上架" checked>
                <input type="radio" id="update-productStatus2" name="productStatus"
                       value="0" title="下架">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
          <textarea id="update-productDesc" name="productDesc"
                    placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(function (){
        let table = layui.table;
        let form = layui.form;
        let layer = layui.layer;
        let dropdown = layui.dropdown ;
        let $ = layui.jquery ;

        table.render({
            elem:'#test',
            url:'product/product_list_page',
            cols:[[
                {field:'productId',width:100,title:'商品编号'},
                {field:'productName', width:300, title: '商品名称'},
                {field:'productCount', width:100, title: '商品库存'},
                {field:'productPrice', width:100, title: '商品价格'},
                {field:'productDate', width:120, title: '上架日期',templet:function(row){
                    let date = new Date(row.productDate);
                    let year =date.getFullYear();
                    let month =date.getMonth()+1;
                    month = month < 10 ? '0' + month : month;
                    let day =date.getDay();
                    day = day < 10 ? '0' + day : day ;
                    return year + "-" + month + "-" + day ;
                }},
                {title:'状态', width:150, templet:'#status-switch'},
                {fixed:'right',title:'操作',width: 134,minwidth:125,toolbar:'#barDemo'}
            ]],

            parseData:function (res){
                return{
                    "code":res.code==200?0:res.code,
                    "data":res.data,
                    "count":res.count
                };
            },
            page:true,
            limit:5,
            limits:[5,10,15,20,25]
        });

        //表格 开关操作
        form.on('switch(demo-templet-status)',function (obj){
            let id =this.value;
            let name =this.name;
            layer.tips(id+''+name+ ' : ' + obj.elem.checked,obj.othis);
        });

        //表格操作按钮
        table.on('tool(test)',function (obj){
            //获取当前行的数据
            let rowData = obj.data;

            let event =obj.event;
            if (event=='edit'){
                //1.设置回显内容
                $("#update-productId").val(rowData.productId);
                $("#update-productName").val(rowData.productName);

                $("#update-type option").filter(function (){
                    return $(this).text() == rowData.productType ;
                 }).prop("selected",true) ;

                $("#update-productPrice").val(rowData.productPrice);
                $("#update-productDesc").text(rowData.productDesc);

                if (rowData.productStatus==1){
                    // 将按钮的属性设置为checked
                    $('#update-productStatus1').prop('checked', true);
                }else (
                    $('#update-productStatus2').prop('checked', true)
                )

                form.render();

                layer.open({
                    type:1,
                    title:'编辑商品',
                    area:['50%','40em'],
                    resize:false,
                    content:$("#updateContainer"),
                    btn:['编辑','取消'],
                    btn1:function( index ) {
                        $.ajax({
                            url:'product/product_update',
                            method:'post',
                            data:$("#updateForm").serialize(),
                            success:function( res ){
                                if(res.code == 200) {
                                    // 弹出提示框
                                    layer.msg("编辑成功")
                                    // 根据弹出层的索引，关闭弹出确认框
                                    layer.close(index) ;
                                    // 重新加载表格数据
                                    table.reload('test',{page:{curr:1}});
                                    return ;
                                }
                                layer.msg("编辑失败")
                            }
                        }) ;
                    }
                });
            }else if (event=='more'){

                dropdown.render({
                    elem: this,
                    show:true,
                    data:[{
                        title:'查看',
                        id:'detail'
                    },{
                        title:'删除',
                        id:'del'
                    }],
                    click:function (menuData){
                        if (menuData.id=='detail'){
                            layer.msg('查看')
                        }else if (menuData.id=='del'){
                            layer.confirm('确定真的要删除这条数据吗？', {
                                btn: ['确定', '关闭'],//按钮
                                title:'删除数据'
                            }, function(index){
                                $.ajax({
                                    url:'product/product_remove',
                                    type:'get',
                                    data:{
                                        "pid":rowData.productId
                                    },
                                    success:function (res){
                                        if (res.code==200){
                                            layer.msg("删除成功");
                                            // 重载表格 - 深度重载（参数叠加）
                                            table.reload('test', {
                                                page: {
                                                    // 重新从第 1 页开始
                                                    curr: 1
                                                },
                                                where: {
                                                    // 传递参数条件
                                                    name: $('#name').val(),
                                                    type: $('#type').val()
                                                }
                                            },true);
                                            layer.close(index);
                                            return ;
                                        }
                                        lay.msg(res.msg)
                                    }
                                })

                            }, function(index){

                            });

                        }
                    }
                });
            }
        });

        //点击添加弹出一个表单
        $("#addBtn").click(function (){
            layer.open({
                type:1,
                title:'添加商品',
                area:['50%','40em'],
                resize:false,
                content:$("#addContainer"),
                btn:['添加','取消'],
                btn1:function( index ) {
                    $.ajax({
                        url:'product/product_add',
                        method:'post',
                        data:$("#addForm").serialize(),
                        success:function( res ){
                            if(res.code == 200) {
                                // 弹出提示框
                                layer.msg("添加成功")
                                $("#add-productId").val("");
                                $("#add-productName").val("");

                                // $("#update-type option").filter(function (){
                                //     return $(this).text() == "请选择类型" ;
                                // }).prop("selected",true) ;

                                $("#add-productPrice").val("");
                                $('#update-productStatus1').prop('checked', true);
                                $("#add-productDesc").val("");

                                form.render();

                                // 根据弹出层的索引，关闭弹出确认框
                                layer.close(index) ;
                                // 重新加载表格数据
                                table.reload('test',{page:{curr:1}});
                                return ;
                            }
                        }
                    }) ;
                }
            });
        });

        // 表格模糊查询
        $("#selectBtn").click(function(){
            // 重载表格 - 深度重载（参数叠加）
            table.reload('test', {
                page: {
                    // 重新从第 1 页开始
                    curr: 1
                },
                where: {
                    // 传递参数条件
                    productName: $('#name').val(),
                    productType: $('#type').val()
                }
            },true);
        });

        // 页面加载时，把类型渲染到下拉框中
        $.ajax({
           url:"product/product_type_list",
           type: "get",
            success:function (res){
               if (res.code==200){
                   $.each(res.data,function (index,obj){
                       //填充搜索表单的类型
                    $('#type').append('<option value="' + obj.typeName + '">' + obj.typeName + '</option>')

                        //填充添加表单的类型
                    $('#add-type').append('<option value="' + obj.typeName + '">' + obj.typeName + '</option>')

                       //填充编辑表单的类型
                    $('#update-type').append('<option value="' + obj.typeName + '">' + obj.typeName + '</option>')

                   });

                   //重新渲染表单
                   form.render('select');
               }

            }
        });

    });
</script>

</body>
</html>